<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="24" :xs="24">
				<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
					label-width="68px">
					<el-form-item label="设备类型" prop="type">
						<el-select v-model="queryParams.type" placeholder="设备类型" clearable style="width: 140px">
							<el-option v-for="item in types" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="SN码" prop="sn">
						<el-select v-model="queryParams.sn" placeholder="设备" clearable style="width: 240px">
							<el-option v-for="sn in sns" :key="sn.value" :label="sn.label" :value="sn.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="选择日期">
						<el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd"
							type="daterange" range-separator="-" start-placeholder="开始日期"
							end-placeholder="结束日期"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
					</el-form-item>
				</el-form>

				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
							@click="handleDelete">删除</el-button>
						<!-- v-hasPermi="['system:user:remove']" -->
					</el-col>
					<el-col :span="1.5">
						<el-button type="warning" plain icon="el-icon-download" size="mini"
							@click="handleExport">导出</el-button>
						<!-- v-hasPermi="['system:user:export']" -->
					</el-col>
					<right-toolbar :showSearch.sync="showSearch" @queryTable="getHistory"
						:columns="columns"></right-toolbar>
				</el-row>

				<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50" align="center" />
					<!-- 遍历 clumns 定义列 -->
					<el-table-column v-for="column in columns" :key="column.key" :label="column.label"
						:prop="column.prop" align="center" v-if="column.visible" :show-overflow-tooltip="true"
						:sortable="column.sortable">
						<!-- 使用 slot-scope 来根据列类型进行不同的处理 -->
						<template slot-scope="scope">
							{{ scope.row[column.prop] }}
						</template>
					</el-table-column>

					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button size="mini" type="danger" icon="el-icon-delete"
								@click="handleDelete(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" @pagination="getHistory" />

			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import {
		getSnList,
		getHistory,
		deleteHistory
	} from "@/api/device/device";
	
	// 引入JOSN结构
	import {
		types
	} from '@/structure/common.js';
	
	import {
		columns
	} from '@/structure/historyData.js';
	
	export default {
		name: "User",
		components: {
			Treeselect
		},
		data() {
			return {
				// 遮罩层
				loading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					type: "charger",
					sn: "",
					dateRange: "",
				},
				sns: [],
				types: types,
				// 列信息
				columns: columns,
				// 表格数据
				dataList: [],
			};
		},
		watch: {
			// 根据名称筛选部门树
			// deptName(val) {
			//   this.$refs.tree.filter(val);
			// }
		},
		created() {
			// this.getList();
			// this.getDeptTree();
			// this.getConfigKey("sys.user.initPassword").then(response => {
			//   this.initPassword = response.msg;
			// });
			this.getSnList()
		},
		methods: {
			getSnList() {
				getSnList(this.queryParams.type).then(res => {
					// console.log("res=" + JSON.stringify(res));

					// 使用 map 方法将 res.data 中的每个元素映射为 { label: ..., value: ... } 的对象
					this.sns = res.data.map(item => ({
						label: item,
						value: item
					}));
					// 设置 queryParams.sn 为 this.sns 数组的第一个元素的 value
					if (this.sns.length > 0) {
						this.queryParams.sn = this.sns[0].value;
					}
				});
			},
			getHistory() {
				let msg = "";

				if (this.queryParams.sn.length == 0) {
					msg = "请选择设备SN码";
					this.$modal.confirm(msg).then(function() {}).then(() => {}).catch(() => {});
					return;
				}

				if (this.queryParams.dateRange.length == 0) {
					msg = "请选择开始和结束日期";
					this.$modal.confirm(msg).then(function() {}).then(() => {}).catch(() => {});
					return;
				}

				let startDate = new Date(this.queryParams.dateRange[0]);
				let endDate = new Date(this.queryParams.dateRange[1]);
				let now = new Date();


				if (startDate > endDate) {
					msg = "开始日期不能大于结束日期";
					this.$modal.confirm(msg).then(function() {}).then(() => {}).catch(() => {});
					return;
				}

				if (startDate > now) {
					msg = "开始日期不能大于当前日期";
					this.$modal.confirm(msg).then(function() {}).then(() => {}).catch(() => {});
					return;
				}

				if (endDate > now) {
					msg = "结束日期不能大于当前日期";
					this.$modal.confirm(msg).then(function() {}).then(() => {}).catch(() => {});
					return;
				}

				let data = {
					type: this.queryParams.type,
					sn: this.queryParams.sn,
					startDate: startDate,
					endDate: endDate,
					pageNum: this.queryParams.pageNum,
					pageSize: this.queryParams.pageSize,
				}
				console.log("getHistory函数中的data=" + JSON.stringify(data));

				this.loading = true;
				getHistory(data).then(res => {
					// console.log("res=" + JSON.stringify(res));
					this.dataList = res.data.list;
					this.total = res.data.total;
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getHistory();
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				let ids = "";
				//即使只有一个也封装为数组
				if (row.id) {
					ids = [row.id];
				} else {
					ids = this.ids;
				}
				let _this = this
				this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function() {
					let data = {
						type: _this.queryParams.type,
						ids: ids,
					}
					return deleteHistory(data);
				}).then(() => {
					this.getHistory();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('system/user/export', {
					...this.queryParams
				}, `user_${new Date().getTime()}.xlsx`)
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id);
				this.single = selection.length != 1;
				this.multiple = !selection.length;
			},
		}
	};
</script>